<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" />
    <script>
      function loadXMLDoc(url) {
        var xmlhttp;
        var txt, x, xx, i;
        if (window.XMLHttpRequest) {
          // code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp = new XMLHttpRequest();
        } else {
          // code for IE6, IE5
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            txt = "<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
            x = xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
            for (i = 0; i < x.length; i++) {
              txt = txt + "<tr>";
              xx = x[i].getElementsByTagName("TITLE");
              {
                try {
                  txt = txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
                } catch (er) {
                  txt = txt + "<td> </td>";
                }
              }
              xx = x[i].getElementsByTagName("ARTIST");
              {
                try {
                  txt = txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
                } catch (er) {
                  txt = txt + "<td> </td>";
                }
              }
              txt = txt + "</tr>";
            }
            txt = txt + "</table>";
            document.getElementById("txtCDInfo").innerHTML = txt;
          }
        };
        xmlhttp.open("GET", url, true);
        xmlhttp.send();
      }
    </script>
  </head>
  <body>
    <div id="txtCDInfo">
      <button
        onclick="loadXMLDoc('https://www.w3cschool.cn//statics/demosource/cd_catalog.xml')"
      >
        Get CD info
      </button>
    </div>
  </body>
</html>
